<template>
  <div class="change-info" v-if="userInfo">
    <el-dialog
      v-model="changeVisible"
      title="修改信息"
      width="500"
      draggable
      :before-close="cancel"
    >
      <!-- 帐号信息 -->
      <el-form label-width="auto" :model="userInfo" style="width: 350px" ref="form" :rules="rules">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="userInfo.name" placeholder="请输入你新的用户名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userInfo.email" placeholder="请输入你新的邮箱" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="userInfo.phone" placeholder="请输入你新的联系电话" />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="userInfo.birthday" type="datetime" placeholder="出生日期" />
        </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <el-input v-model="userInfo.address" placeholder="请输入你新的居住地址" />
        </el-form-item>
        <el-form-item label="个人简介" prop="biography">
          <el-input v-model="userInfo.biography" placeholder="请编辑你的个人简介" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="sure">修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { updateUser } from '@/api/user'
import { ref } from 'vue'

const props = defineProps({
  user: Object,
})

const user = { ...props.user }

const emit = defineEmits(['close'])

// 正则校验
const regex = {
  emailRegex:
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
  addressRegex: /^[^\r\n]{1,40}$/,
  phoneRegex: /^\+?[1-9]\d{1,14}(\(\d{1,3}\)|\s?\d{1,3})?[-.\s]?\d{1,14}$/,
  biographyRegex: /^[^\r\n]{1,50}$/,
}

// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 20, message: '用户名必须是1-20位字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: regex.emailRegex,
      message: '请按照正确的格式输入邮箱',
      trigger: 'blur',
    },
  ],
  phone: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' },
    {
      pattern: regex.phoneRegex,
      message: '请按照正确的格式输入手机号',
      trigger: 'blur',
    },
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' },
    {
      pattern: regex.addressRegex,
      message: '不能超过40个字符',
      trigger: 'blur',
    },
  ],
  biography: [
    { required: true, message: '请编辑个人简介', trigger: 'blur' },
    {
      pattern: regex.biographyRegex,
      message: '不能超过50个字符',
      trigger: 'blur',
    },
  ],
}

// 对话框显示
const changeVisible = ref(true)

// 个人信息
const userInfo = ref(user)

// 对话框DOM
const form = ref()

// 修改信息
const sure = async () => {
  await form.value.validate()
  const res = (await updateUser(userInfo.value)).data
  if (!res.success) {
    ElNotification({
      title: '失败',
      message: '修改用户信息失败',
      type: 'error',
    })
    return
  }
  ElNotification({
    title: '成功',
    message: '修改用户信息成功',
    type: 'success',
  })
  cancel()
}

// 取消
const cancel = () => {
  userInfo.value = ''
  emit('close')
}
</script>

<style scoped less="scss">
.change-info {
  width: 500px;
  height: 400px;
  z-index: 5;
}
</style>
